﻿<!DOCTYPE HTML>
<html>
<head>
    <title>订单</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="http://g.alicdn.com/bui/bui/1.1.21/css/bs3/dpl.css" rel="stylesheet">
    <link href="http://g.alicdn.com/bui/bui/1.1.21/css/bs3/bui.css" rel="stylesheet">
    @*<link href="../assets/css/dpl-min.css" rel="stylesheet" type="text/css" />
        <link href="../assets/css/bui-min.css" rel="stylesheet" type="text/css" />*@
    <link href="../assets/css/page-min.css" rel="stylesheet" type="text/css" />   <!-- 下面的样式，仅是为了显示代码，而不应该在项目中使用-->
    <link href="../assets/css/prettify.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        code {
            padding: 0px 4px;
            color: #d14;
            background-color: #f7f7f9;
            border: 1px solid #e1e1e8;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <form id="searchForm" class="form-horizontal span24">
                <div class="row">
                    <div class="control-group span8">
                        <label class="control-label">编号：</label>
                        <div class="controls">
                            <input type="text" class="control-text" name="no" placeholder="编号">
                        </div>
                    </div>
                    <div class="control-group span8">
                        <label class="control-label">会员账号：</label>
                        <div class="controls">
                            <input type="text" class="control-text" name="memberaccount" placeholder="账号">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="control-group span8">
                        <label class="control-label">会员手机：</label>
                        <div class="controls">
                            <input type="text" class="control-text" name="memberphone" placeholder="手机号码">
                        </div>
                    </div>
                    <div class="control-group span8">
                        <label class="control-label">会员昵称：</label>
                        <div class="controls">
                            <input type="text" class="control-text" name="membernickname" placeholder="昵称">
                        </div>
                    </div>

                </div>
                <div class="row">
                    <div class="control-group span8">
                        <label class="control-label">商品信息：</label>
                        <div class="controls">
                            <input type="text" class="control-text" name="productInfo" placeholder="商品信息">
                        </div>
                    </div>
                    <div class="control-group span8">
                        <label class="control-label">快递信息：</label>
                        <div class="controls">
                            <input type="text" class="control-text" name="logisticsInfo" placeholder="快递信息">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="control-group span8">
                        <label class="control-label">会员姓名：</label>
                        <div class="controls">
                            <input type="text" class="control-text" name="membertruename" placeholder="姓名">
                        </div>
                    </div>
                    <div class="control-group span12">
                        <label class="control-label">备注：</label>
                        <div class="controls">
                            <input type="text" class="control-text" name="remark" placeholder="备注">
                        </div>
                    </div>

                </div>
                <div class="row">
                    <div class="control-group span12">
                        <label class="control-label">订单时间：</label>
                        <div class="controls">
                            <input type="text" class="calendar" name="startDate"><span> - </span><input name="endDate" type="text" class="calendar">
                        </div>
                    </div>
                    <div class="control-group span12">
                        <label class="control-label">是否完成付款：</label>
                        <div class="controls">
                            <select name="isdeducted">
                                <option value="0">--所有--</option>
                                <option value="True">--已完成--</option>
                                <option value="False">--未完成--</option>
                            </select>
                        </div>
                    </div>
                    <div class="span3 offset2">
                        <button type="submit" id="btnSearch" class="button button-primary">搜索</button>
                    </div>
                </div>
            </form>
        </div>
        <div class="search-grid-container">
            <div id="grid"></div>
        </div>
    </div>
    <div id="orderContent" class="hidden" style="display:none;">
        <form id="form" class="form-horizontal">
            <div class="row account">
                <div class="control-group span8">
                    <label class="control-label">账户：</label>
                    <div class="controls">
                        <input type="text" class="input-normal control-text" id="account" data-rules="{required : true}">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="control-group span8">
                    <label class="control-label">商品信息：</label>
                    <div class="controls">
                        <textarea rows="5" class="input-normal control-text" id="productInfo" data-rules="{required : true}"></textarea>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="control-group span8">
                    <label class="control-label">物流信息：</label>
                    <div class="controls">
                        <input type="text" class="input-normal control-text" id="logisticsInfo">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="control-group span8">
                    <label class="control-label">售价：</label>
                    <div class="controls">
                        <input type="number" min="0.1" class="input-normal control-text" id="salePrice">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="control-group span8">
                    <label class="control-label">成本价：</label>
                    <div class="controls">
                        <input type="number" min="0.1" class="input-normal control-text" id="purchasePrice">
                    </div>
                </div>
            </div>
            <div class="row status">
                <div class="control-group span8">
                    <label class="control-label">状态：</label>
                    <div class="controls">
                        <select id="status" class="input-small">
                            <option value="1">待发货</option>
                            <option value="2">发货中</option>
                            <option value="3">已收货</option>
                            <option value="4">退货中</option>
                            <option value="5">已退货</option>
                            <option value="0">无效</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="control-group span8">
                    <label class="control-label">下单时间：</label>
                    <div class="controls">
                        <input type="text" class="calendar calendar-time" id="date">
                    </div>
                </div>
            </div><div class="row">
                <div class="control-group span8">
                    <label class="control-label">备注：</label>
                    <div class="controls">
                        <input type="text" class="input-normal control-text" id="remark">
                    </div>
                </div>
            </div>
        </form>
    </div>
    <div id="statusContent" class="hidden" style="display:none;">
        <form id="form" class="form-horizontal">
            <div class="row">
                <div class="control-group span8">
                    <label class="control-label">状态：</label>
                    <div class="controls">
                        <select id="editOrderStatus">
                            <option value="0">无效</option>
                            <option value="1">待发货</option>
                            <option value="2">运输中</option>
                            <option value="3">已收货</option>
                            <option value="4">退货中</option>
                            <option value="5">已退货</option>
                        </select>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <script type="text/javascript" src="~/assets/js/jquery-1.8.1.min.js"></script>
    <script type="text/javascript" src="~/assets/js/bui-min.js"></script>
    <script type="text/javascript" src="~/assets/js/config-min.js"></script>
    <script type="text/javascript">
        BUI.use('common/page');
    </script>
    <script src="http://g.tbcdn.cn/fi/bui/bui-min.js?t=201309041336"></script>
    <script type="text/javascript">
        var orderId = null;
        var orderDialog = null;
        var statusDialog = null;
        var Grid = BUI.Grid,
            Store = BUI.Data.Store,
            columns = [
                { title: '订单编号', width: 100, sortable: false, dataIndex: 'no' },
                { title: '会员账号', width: 100, sortable: true, dataIndex: 'memberAccount' },
                { title: '商品信息', width: 100, sortable: true, dataIndex: 'productInfo' },
                { title: '售价', width: 100, sortable: true, dataIndex: 'salePrice' },
                { title: '成本价', width: 100, sortable: true, dataIndex: 'purchasePrice' },
                { title: '备注', width: 100, sortable: true, dataIndex: 'remark' },
                {
                    title: '物流信息', width: 150, sortable: false, dataIndex: 'logisticsInfo'
                },
                { title: '状态', width: 100, sortable: true, dataIndex: 'statusText' },
                { title: '下单时间', width: 100, sortable: true, dataIndex: 'date' },
                {
                    title: '是否完成付款', width: 100, sortable: true, dataIndex: 'isDeducted', renderer: function (value, obj) {
                        if (value) {
                            return "完成"
                        } else {
                            return "<span style='color:red'><b>未完成,还需支付：" + obj.remainPaymentMoney + "</b></span>";
                        }
                    }
                },
                {
                    title: '操作', width: 300, dataIndex: 'id', renderer: function (value, obj) {
                        var edit = "<span class='grid-command' onclick='edit(" + JSON.stringify(obj) + ")'>编辑</span>";
                        var updateStatus = "<span class='grid-command' onclick='updateStatus(" + JSON.stringify(obj) + ")'>更新状态</span>";
                        if (!obj.isDeducted) {
                            var deductMoney = "<span class='grid-command' onclick='deductMoney(\"" + obj.id + "\")'>已付款</span>";
                            return edit + updateStatus + deductMoney;
                        }
                        else { return edit + updateStatus; }
                    }
                }
            ];

        var store = new Store({
            url: '/order/list',
            autoLoad: true,
            pageSize: 10
        }),
            grid = new Grid.Grid({
                render: '#grid',
                loadMask: true,
                forceFit: true,
                columns: columns,
                store: store,
                plugins: [Grid.Plugins.AutoFit], //勾选插件、自适应宽度插件
                tbar: {
                    items: [{
                        btnCls: 'button button-primary button-small',
                        text: '增加',
                        handler: function () {
                            orderId = null;
                            $(".account,.status").show();
                            orderDialog.show();
                        }
                    }]
                },
                // 顶部工具栏
                bbar: {
                    //items 也可以在此配置
                    // pagingBar:表明包含分页栏
                    pagingBar: true
                }
            });

        grid.render();

        //创建表单，表单中的日历，不需要单独初始化
        var form = new BUI.Form.HForm({
            srcNode: '#searchForm'
        }).render();

        form.on('beforesubmit', function (ev) {
            //序列化成对象
            reloadGrid(true);
            return false;
        });


        BUI.use(['bui/overlay', 'bui/form'], function (Overlay, Form) {
            var form = new Form.HForm({
                srcNode: '#form'
            }).render();

            orderDialog = new Overlay.Dialog({
                title: '新增/编辑订单',
                width: 500,
                height: 520,
                contentId: 'orderContent',
                success: function () {
                    var account = $.trim($("#account").val());
                    if (orderId == null & account == "") {
                        BUI.Message.Alert('请输入账户', 'warning');
                        return;
                    }

                    var productInfo = $.trim($("#productInfo").val());
                    if (productInfo == "") {
                        BUI.Message.Alert('请输入商品信息', 'warning');
                        return;
                    }

                    var salePrice = $.trim($("#salePrice").val());
                    if (salePrice == "") {
                        BUI.Message.Alert('请输入商品售价', 'warning');
                        return;
                    }

                    if (parseFloat(salePrice) < 0) {
                        BUI.Message.Alert('请输入正确的商品售价', 'warning');
                        return;
                    }

                    var date = $.trim($("#date").val());
                    if (date == "") {
                        BUI.Message.Alert('请输入订单时间', 'warning');
                        return;
                    }

                    var purchasePrice = $.trim($("#purchasePrice").val());
                    var remark = $.trim($("#remark").val());
                    var logisticsInfo = $.trim($("#logisticsInfo").val());
                    var status = $("#status").val()
                    $.post("/order/save", {
                        id: orderId,
                        account: account, status: status,
                        productInfo: productInfo, logisticsInfo: logisticsInfo, remark: remark, date: date, purchasePrice: purchasePrice, salePrice: salePrice
                    }, function (res) {
                        if (res.success) {
                            $("#form").get(0).reset()
                            orderDialog.close();
                            store.load()
                        }
                        else {
                            BUI.Message.Alert('保存失败:' + res.message, 'warning');
                        }
                    })
                }
            });

            statusDialog = new Overlay.Dialog({
                title: '更新订单状态',
                width: 500,
                height: 120,
                contentId: 'statusContent',
                success: function () {
                    var status = $.trim($("#editOrderStatus").val());
                    $.post("/order/updatestatus", {
                        id: orderId, status: status
                    }, function (res) {
                        if (res.success) {
                            $("#form").get(0).reset()
                            statusDialog.close();
                            store.load()
                        }
                        else {
                            BUI.Message.Alert('更新失败:' + res.message, 'warning');
                        }
                    })
                }
            });
        });

        function reloadGrid(returnFirstPage) {
            var obj = form.serializeToObject();
            if (returnFirstPage) {
                obj.start = 0; //返回第一页
            }
            store.load(obj);
        }

        function edit(order) {
            orderId = order.id;
            orderDialog.show();
            $(".account,.status").hide();
            $("#productInfo").val(order.productInfo);
            $("#logisticsInfo").val(order.logisticsInfo);
            $("#remark").val(order.remark);
            $("#purchasePrice").val(order.purchasePrice);
            $("#salePrice").val(order.salePrice);
            $("#date").val(order.date);
        }

        function updateStatus(order) {
            orderId = order.id;
            statusDialog.show();
            $("#editOrderStatus").val(order.status);
        }

        function deductMoney(id) {
            BUI.Message.Confirm('你确认要设置已付款吗？', function () {
                $.post("/order/deductmoney/" + id, {}, function (resp) {
                    if (resp.success) {
                        reloadGrid();
                    } else {
                        BUI.Message.Alert(resp.message, 'error');
                    }
                })
            });
        }
    </script>
</body>
</html>
